<template>
		<view class="body">
			<scroll-view scroll-y="true" class="scroll-Y" :enable-back-to-top="true">
				<!-- 标题栏 -->
				<view class="header">
					<view class="titleWrap">
						<text>每日推荐</text>
					</view>
					<view class="currentDate">
						<text>{{currentDate | dateFormat}}</text>
					</view>
					<view class="currentMonth">
						<text class="biasline">/</text><text class="monthText">{{ currentMonth | monthFormat}}</text>
					</view>
				</view>
				
				<!-- 列表区 -->
				<view class="songlist">
					<view class="playAll" @tap="playAllSongs()">
						<i class="iconfont icon-media-play-03" style="margin-right:35rpx;font-size:50rpx;"></i>
						<view class="playAllText">播放全部<text class="playAllNumber">({{currentSongList.length}})</text></view>
					</view>
					<view class="list-item" @tap="playSong(index)" v-for="(item, index) in currentSongList" :key="item.id" :style="{marginBottom: index === currentSongList.length-1? '60rpx':''}">
						<view class="numberWrap">
							<view class="numberBadge" >{{index + 1}}</view>
						</view>
						<view class="songInfo">
							<view class="nameWrap">
								<i v-if="currentPlaySymbol === index" style="color: rgba(255, 255, 255, 0.96);margin-right: 10rpx;" class="iconfont icon-playing-copy"></i>
								<view class="songname">{{item.name}}</view>
							</view>
							<view class="descWrap">
								<view class="description">{{item.singer}}—{{item.sename}}</view>
							</view>
						</view>
						<view class="playBtn">
							<i :class="item.icon"></i>
						</view>
					</view>
				</view>
				
				
			</scroll-view>
		</view>
</template>

<script>
	import { mapMutations, mapState } from	'vuex'
	export default {
		data() {
			return {
				currentDate: '',
				currentMonth: '',
				currentSongList: null,
				currentPlaySymbol: null,
				playIcon: 'iconfont icon-media-play-03',
				stopIcon: 'iconfont icon-zantingtingzhi1'
			}
		},
		computed:{
			...mapState(['curTapIndex', 'globalPlayList', 'curMusicInfo', 'globalPlayStatus'])
		},
		methods: {
			...mapMutations(['changeGlobalPlayList', 'changeCurMusicInfo', 'changeCurTapIndex', 'changePlayStatus', 'changeStopStatus']),
			playSong(index){
				let musicInfo = this.currentSongList[index]
				this.changeCurTapIndex(index)
				this.changePlayStatus()
				this.$player.title = musicInfo.name
				this.$player.singer = musicInfo.singer
				this.$player.coverImgUrl = musicInfo.picurl
				this.$player.src = `https://music.163.com/song/media/outer/url?id=${musicInfo.mid}.mp3`
				this.openPlayPage(musicInfo.mid)
			},
			playAllSongs(){
				// 点击播放全部之后从开始播放第一首歌
				this.changeGlobalPlayList(this.currentSongList)
				let musicInfo = this.currentSongList[0]
				let mid = musicInfo.mid
				this.changeCurMusicInfo(musicInfo)
				this.changeCurTapIndex(0)
				this.changePlayStatus()
				this.currentPlaySymbol = 0
				this.$player.title = musicInfo.name
				this.$player.singer = musicInfo.singer
				this.$player.coverImgUrl = musicInfo.picurl
				this.$player.src = `https://music.163.com/song/media/outer/url?id=${mid}.mp3`
				this.openPlayPage(mid)
			},
			openPlayPage(id){
				uni.navigateTo({
					url: `../play/play?mid=${id}`
				})
			}
		},
		onLoad() {
			let that = this
			// uni.request({
			// 	url: `https://music.163.com/song/media/outer/url?id=402070840.mp3`,
			// 	url: `${that.$http.vercelUrl}/check/music?id=402070840.mp3`,
			// 	success: res => {
			// 		let searchRes = res.data.search('DOCTYPE html')
			// 		console.log('我(非VIP)searchRes：',searchRes);
			// 	}
			// })
			// 获取当前时间戳
			this.currentMonth = this.currentDate = new Date().getTime()
			
			// 请求每日歌单详情(需携带cookie)
			uni.getStorage({
				key: 'userInfo',
				success: function(res){
					uni.request({
						url: `${that.$http.vercelUrl}/recommend/songs`,
						header: {
							cookie: res.data.cookie
						},
						success: function(sheetData) {
							// console.log('每日歌单推荐数据:',sheetData)
							let dailySongsArray = sheetData.data.data.dailySongs
							let songInfoList = []
							dailySongsArray.forEach((item, index) => {
								songInfoList[index] = {
									id: index,
									name: item.name,					// 音乐名
									sename: item.al.name, 		// 专辑名
									singer: item.ar[0].name,	// 歌手名
									mid: item.id,							// 歌曲id(用于获取对应的播放url)
									icon: 'iconfont icon-media-play-03', // 设置播放字体图标,以控制对应歌曲的播放按钮图标
									picurl: item.al.picUrl + '?param=150y150'
								}
							})
							// 将获取的日推歌单设置为全局播放组件歌单
							that.currentSongList = songInfoList
							that.changeGlobalPlayList(songInfoList)
						},
						fail:function(e) {
							console.log('每日歌单数据请求失败：',e)
						}
					})
				}
			})
		},
		onShow() {
			let that = this
			let mname = that.curMusicInfo.name
			if (this.currentSongList) {
				console.log('每日推荐onShow');
				this.currentSongList.forEach((item, index)=> {
					if(item.name == mname) {
						that.currentPlaySymbol = index
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.body {
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(#f04242, #9198e5);
	
	.scroll-Y {
		height: 100%;
		.header {
			width: 100%;
			height: 20%;
			position: relative;
			.titleWrap {
				width: 70%;
				position: absolute;
				top: 159rpx;
				left: 448.7rpx;
				text {
					color: #FFFFFF;
					font-size: 2rem;
					font-weight: 600;
					line-height: 2rem;
					text-shadow: 2.3px 0.1px rgba(51, 200, 227, 0.35);
				}
			}
			
			.currentDate {
				color: #eaeaea;
				font-size: 2.5rem;
				position: absolute;
				font-weight: 600;
				top: 4.3rem;
				left: 1.35rem;
				text-shadow: 2.3px 0.1px rgba(51, 200, 227, 0.35);
			}
			.currentMonth {
				color: #eaeaea;
				font-size: 43.4rpx;
				position: absolute;
				font-weight: 600;
				top: 135.1rpx;
				left: 1.55rem;
				text-shadow: 2.3px 0.1px rgba(51, 200, 227, 0.35);
				.biasline {
					position: absolute;
					top: 39.5rpx;
					left: 86.4rpx;
				}
				.monthText {
					position: absolute;
					top: 43.6rpx;
					left: 111.5rpx;
				}
			}
		}
		
		.songlist {
			height: 80%;
			background: rgba(117, 117, 117, 0.03);
			backdrop-filter: blur(30px);
			.playAll {
				height: 90rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 30rpx;
				color: #FFF;
				iconfont {
					color: #FFFFFF;
				}
				.playAllText {
					font-size: 37rpx;
					.playAllNumber {
						font-size: 31rpx;
					}
				}
			}
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 130rpx;
				.numberWrap {
					width: 10%;
					display: inline-block;
					text-align: center;
					.numberBadge {
						color: rgba(255, 255, 255, 0.47);
						padding-left: 30rpx;
						font-size: 36rpx;
					}
				}
				.songInfo {
					width: 60%;
					display: inline-block;
					.nameWrap {
						display: flex;
						justify-content: flex-start;
						align-items: baseline;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						.songname {
							font-size: 33rpx;
							font-weight: 500;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							color: rgba(255, 255, 255, 0.96);
						}
					}
					.descWrap {
						display: flex;
						justify-content: flex-start;
						.description {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 24rpx;
							color: rgba(119, 210, 226, 0.93);
						}
					}
				}
				.playBtn {
					width: 20%;
					display: inline-block;
					.iconfont {
						color: rgba(239, 222, 237, 0.58);
						font-size: 56rpx;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
}




</style>
